<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style>
            .loading-icon {
               font-size: 3rem;
               color: var(--primary-color);
            }
        </style>
    </ui:define>

    <ui:define name="title">
        AjaxFramework <span class="subitem">Status</span>
    </ui:define>

    <ui:define name="description">
        AjaxStatus is a global indicator to provide feedback about the ongoing ajax request. This page has two AjaxStatus components, one with facet driven declarative
        approach and the other one using callbacks.
    </ui:define>

    <ui:param name="documentationLink" value="/components/ajaxstatus"/>
    <ui:param name="widgetLink" value="AjaxStatus-1"/>

    <ui:define name="implementation">
        <div class="card text-secondary">
            <p:ajaxStatus styleClass="block mb-4">
                <f:facet name="default">
                    <h:outputText value="Status: StandBy" />
                </f:facet>

                <f:facet name="start">
                    <i class="pi pi-spin pi-spinner loading-icon" aria-hidden="true"></i>
                </f:facet>

                <f:facet name="complete">
                    <h:outputText value="Status: Completed" />
                </f:facet>
            </p:ajaxStatus>

            <p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()"/>

            <p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
                <div class="text-center">
                    <i class="pi pi-spin pi-spinner loading-icon" aria-hidden="true"></i>
                </div>
            </p:dialog>

            <h:form>
                <p:commandButton value="Send" styleClass="ui-button-outlined ui-button-secondary" />
            </h:form>
        </div>
    </ui:define>

</ui:composition>
